<template>
	<view class='cash-withdrawal'>
		<view class="navbar1">
			<view class="iconfont icon-xiangzuo" @tap='returns'></view>
			<text>绑定银行卡</text>
		</view>
    <view style="height:100rpx"></view>
		<view class='wrapper'>
			<view class='list'>
				<form @submit="subCard" report-submit='true'>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>持卡人</view>
						<view class='input'><input placeholder='请输入持卡人姓名' placeholder-class='placeholder' v-model="name" /></view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>卡号</view>
						<view class='input'><input type='number' placeholder='请填写卡号' placeholder-class='placeholder' v-model="card_number" /></view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>银行</view>
						<view class='input'>
							<input type='text' placeholder='请填写银行' placeholder-class='placeholder' v-model="card_bank" />
							<!-- <picker @change="bindPickerChange" :value="index" :range="array">
						<text class='Bank'>{{ card_bank }}</text>
						<text class='iconfont icon-qiepian38'></text>
					</picker> -->
						</view>
					</view>
					<button formType="submit" class='bnt bg-color'>保存</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		extractBank,
		getUserInfo
	} from '@/api/user.js';
	import {
		setCard
	} from '@/api/api.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				array: [], //银行列表
				userInfo: {},
				index: 0,
				name: '',
				navActive: 0,
				card_number: '',
				card_bank: ''
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
			if (this.isLogin) {
				this.getUserInfo();
				this.getUserExtractBank();
			} else {
				// #ifdef H5 || APP-PLUS
				toLogin();
				// #endif 
			}
		},
		methods: {
      	// 后退
			returns: function() {
				uni.navigateBack()
			},
			getUserExtractBank: function() {
				let that = this;
				extractBank().then(res => {
					let array = res.data.extractBank;
					array.unshift("请选择银行");
					that.array = array
				});
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value;
				this.card_bank = this.array[this.index]
			},
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
					console.log(res);
					let data = res.data
					this.name = data.card_name
					this.card_number = data.card_number
					this.card_bank = data.card_bank
				});
			},
			subCard() {
				console.log(this.name);
				console.log(this.card_number);
				console.log(this.array[this.index])
				if (this.name.length == 0) return this.$util.Tips({
					title: '请填写持卡人姓名'
				});
				if (this.card_number.length == 0) return this.$util.Tips({
					title: '请填写卡号'
				});
				if (this.card_bank.length == 0) return this.$util.Tips({
					title: "请选择银行"
				})
				let params = {
					'card_name': this.name,
					'card_number': this.card_number,
					'card_bank': this.card_bank
				}
				setCard(params).then(res => {
					console.log(res);
					this.$util.Tips({
						title: '设置成功',
						icon: 'success'
					}, {
						tab: 3,
						url: '/pages/user/index'
					});
				})
			}
		},
		created() {
			this.getUserExtractBank()
			this.getUserInfo()
			console.log(this.userInfo);
		}
	}
</script>

<style>
	page {
		background-color: #fff !important;
	}

	.cash-withdrawal .wrapper .list {
		padding: 0 30rpx;
	}

	.cash-withdrawal .wrapper .list .item {
		border-bottom: 1rpx solid #eee;
		min-height: 28rpx;
		font-size: 30rpx;
		color: #333;
		padding: 39rpx 0;
	}

	.cash-withdrawal .wrapper .list .item .name {
		width: 130rpx;
	}

	.cash-withdrawal .wrapper .list .item .input {
		width: 505rpx;
	}

	.cash-withdrawal .wrapper .list .item .input .placeholder {
		color: #bbb;
	}

	.cash-withdrawal .wrapper .list .item .picEwm,
	.cash-withdrawal .wrapper .list .item .pictrue {
		width: 140rpx;
		height: 140rpx;
		border-radius: 3rpx;
		position: relative;
		margin-right: 23rpx;
	}

	.cash-withdrawal .wrapper .list .item .picEwm image {
		width: 100%;
		height: 100%;
		border-radius: 3rpx;
	}

	.cash-withdrawal .wrapper .list .item .picEwm .icon-guanbi1 {
		position: absolute;
		right: -14rpx;
		top: -16rpx;
		font-size: 40rpx;
	}

	.cash-withdrawal .wrapper .list .item .pictrue {
		border: 1px solid rgba(221, 221, 221, 1);
		font-size: 22rpx;
		color: #BBBBBB;
	}

	.cash-withdrawal .wrapper .list .item .pictrue .icon-icon25201 {
		font-size: 47rpx;
		color: #DDDDDD;
		margin-bottom: 3px;
	}

	.cash-withdrawal .wrapper .list .tip {
		font-size: 26rpx;
		color: #999;
		margin-top: 25rpx;
	}

	.cash-withdrawal .wrapper .list .bnt {
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		text-align: center;
		border-radius: 50rpx;
		line-height: 90rpx;
		margin: 64rpx auto;
	}

	.cash-withdrawal .wrapper .list .tip2 {
		font-size: 26rpx;
		color: #999;
		text-align: center;
		margin: 44rpx 0 20rpx 0;
	}

	.cash-withdrawal .wrapper .list .value {
		height: 135rpx;
		line-height: 135rpx;
		border-bottom: 1rpx solid #eee;
		width: 690rpx;
		margin: 0 auto;
	}

	.cash-withdrawal .wrapper .list .value input {
		font-size: 80rpx;
		color: #282828;
		height: 135rpx;
		text-align: center;
	}

	.cash-withdrawal .wrapper .list .value .placeholder2 {
		color: #bbb;
	}

	/* .price {
		color: $theme-color;
	} */
	.cash-withdrawal .navbar .header {
		height: 96rpx;
		font-size: 30rpx;
		color: #050505;
		background-color: #fff;
		/* #ifdef MP */
		padding-right: 95rpx;
		/* #endif */
	}

	.home {
		/* #ifdef H5 */
		top: 20rpx !important;
		/* #endif */
	}

	.navbar .header .item {
		position: relative;
		margin: 0 25rpx;
	}

	.navbar .header .item.on:before {
		position: absolute;
		width: 60rpx;
		height: 5rpx;
		background-repeat: no-repeat;
		content: "";
		background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
		bottom: -10rpx;
		left: 50%;
		margin-left: -28rpx;
	}

	.navbar {
		position: fixed;
		background-color: #fff;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
	}

	.navbar .navbarH {
		position: relative;
	}

	.navbar .navbarH .navbarCon {
		position: absolute;
		bottom: 0;
		height: 100rpx;
		width: 100%;
	}

	.home {
		color: #fff;
		position: fixed;
		font-size: 33rpx;
		width: 140rpx;
		height: 54rpx;
		z-index: 100;
		left: 33rpx;
		background: rgba(0, 0, 0, 0.25);
		border-radius: 27rpx;
	}

	.home .line {
		width: 1rpx;
		height: 24rpx;
		background: rgba(255, 255, 255, 0.25);
	}

	.home .icon-xiangzuo {
		font-size: 28rpx;
	}

	.share-box {
		z-index: 1000;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

	}

	.share-box image {
		width: 100%;
		height: 100%;
	}
</style>
